<template>
  <view class="rank-page">
    <!-- 顶部导航 -->
    <view class="rank-nav">
      <text class="back-btn" @click="goBack">← 返回</text>
      <text class="rank-title">{{ rankTitle }}</text>
    </view>

    <!-- 排行列表 -->
    <view class="rank-list">
      <view class="list-item" v-for="(item, index) in rankData" :key="index">
        <text class="rank-tag" :style="{background: item.bg}">{{ index + 1 }}</text>
        <text class="name">{{ item.name }}</text>
        <text class="num" :style="{color: item.color}">{{ item.num }}</text>
      </view>
    </view>

    <!-- 更多按钮（可扩展分页/全部数据） -->
    <button class="more-btn" @click="loadMore">加载更多</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rankType: '', // 区分年度/月度/本周
      rankTitle: '',
      rankData: []
    }
  },
  onLoad(options) {
    this.rankType = options.type || 'year';
    this.initRankData();
  },
  methods: {
    // 返回首页
    goBack() {
      uni.navigateBack();
    },
    // 初始化排行数据
    initRankData() {
      // 根据类型模拟数据，实际可对接接口
      if (this.rankType === 'year') {
        this.rankTitle = '本年排行';
        this.rankData = [
          { name: '张仁菊', num: '↑885', bg: '#FFD700', color: '#28a745' },
          { name: '蒲晓芳', num: '↑802', bg: '#C0C0C0', color: '#28a745' },
          { name: '聂丹', num: '↑718', bg: '#CD7F32', color: '#28a745' },
          { name: '测试4', num: '↑600', bg: '#eee', color: '#28a745' },
        ];
      } else if (this.rankType === 'month') {
        this.rankTitle = '本月排行';
        this.rankData = [
          { name: '张仁菊', num: '↑137', bg: '#FFD700', color: '#28a745' },
          { name: '蒲晓芳', num: '↑41', bg: '#C0C0C0', color: '#28a745' },
          { name: '聂丹', num: '↑30', bg: '#CD7F32', color: '#28a745' },
          { name: '测试4', num: '↑20', bg: '#eee', color: '#28a745' },
        ];
      } else {
        // 可扩展“本周排行”逻辑
        this.rankTitle = '本周排行';
        this.rankData = [
          { name: '张仁菊', num: '↑50', bg: '#FFD700', color: '#28a745' },
          { name: '蒲晓芳', num: '↑40', bg: '#C0C0C0', color: '#28a745' },
          { name: '聂丹', num: '↑30', bg: '#CD7F32', color: '#28a745' },
        ];
      }
    },
    // 加载更多（示例逻辑，实际可对接接口分页）
    loadMore() {
      uni.showToast({ title: '加载更多逻辑待实现', icon: 'none' });
    }
  }
}
</script>

<style scoped>
.rank-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 24rpx;
}

/* 顶部导航 */
.rank-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.back-btn {
  font-size: 28rpx;
  color: #007bff;
}
.rank-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 排行列表 */
.rank-list {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  margin-bottom: 24rpx;
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.rank-tag {
  width: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
}
.name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.num {
  font-size: 28rpx;
}

/* 更多按钮 */
.more-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #fff;
  color: #007bff;
  font-size: 28rpx;
  border-radius: 8rpx;
  border: 1px solid #007bff;
}
</style>